<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>免费起名</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="chinese-style.css">
  <style>
    body {
      font-family: "FangSong", "仿宋", "SimSun", "宋体", serif;
      background-color: var(--rice-paper);
      margin: 0;
      padding: 0;
      min-height: 100vh;
      position: relative;
    }
    
    .mountain-bg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      z-index: -1;
      opacity: 0.05;
    }
    
    .navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 20px;
      background-color: var(--rice-paper);
      border-bottom: 1px solid var(--ink-wash-2);
      position: relative;
    }
    
    .navbar:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--vermilion), var(--mountain-green), var(--indigo-blue));
      opacity: 0.5;
    }
    
    .form-container {
      padding: 24px 20px;
    }
    
    .form-group {
      margin-bottom: 24px;
      position: relative;
    }
    
    .input-field {
      width: 100%;
      padding: 14px 16px;
      border-radius: 8px;
      border: 1px solid var(--ink-wash-2);
      background-color: var(--rice-paper);
      font-size: 16px;
      transition: all 0.3s;
      font-family: inherit;
    }
    
    .input-field:focus {
      outline: none;
      border-color: var(--mountain-green);
      box-shadow: 0 0 0 2px rgba(42, 93, 67, 0.1);
    }
    
    .label {
      display: block;
      margin-bottom: 8px;
      font-weight: 500;
      color: var(--ink-gray);
      position: relative;
      padding-left: 14px;
    }
    
    .label:before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 14px;
      background-color: var(--mountain-green);
      border-radius: 2px;
      opacity: 0.8;
    }
    
    .radio-group {
      display: flex;
      gap: 16px;
      margin-top: 8px;
    }
    
    .radio-item {
      display: flex;
      align-items: center;
    }
    
    .radio-input {
      margin-right: 6px;
      accent-color: var(--mountain-green);
    }
    
    .methods {
      margin-top: 40px;
      position: relative;
    }
    
    .methods-title {
      text-align: center;
      font-size: 18px;
      margin-bottom: 20px;
      position: relative;
      display: inline-block;
      color: var(--ink-black);
    }
    
    .methods-title:after {
      content: '';
      position: absolute;
      bottom: -5px;
      left: 0;
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--ink-gray), transparent);
    }
    
    .method-card {
      background-color: var(--rice-paper);
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 16px;
      border: 1px solid var(--ink-wash-2);
      transition: all 0.3s;
      position: relative;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    }
    
    .method-card:active {
      transform: translateY(2px);
      border-color: var(--ink-wash-1);
    }
    
    .method-icon-wrapper {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background-color: var(--rice-paper-dark);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .method-title {
      font-weight: 600;
      font-size: 18px;
      margin-bottom: 8px;
      color: var(--ink-black);
      padding-right: 40px;
    }
    
    .method-desc {
      color: var(--ink-gray);
      font-size: 14px;
      line-height: 1.6;
    }
    
    .chinese-tab-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: var(--rice-paper);
      display: flex;
      padding: 10px 0 25px;
      border-top: 1px solid var(--ink-wash-1);
      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.03);
      z-index: 10;
    }
    
    .chinese-tab-bar:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--mountain-green), var(--indigo-blue), var(--vermilion));
      opacity: 0.5;
    }
    
    .tab-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: var(--stone-gray);
      transition: all 0.3s;
    }
    
    .tab-item.active {
      color: var(--mountain-green);
    }
    
    .tab-icon {
      margin-bottom: 4px;
    }
    
    .pro-tag {
      background-color: rgba(188, 53, 35, 0.1);
      color: var(--vermilion);
      padding: 3px 8px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 500;
      position: absolute;
      top: 20px;
      right: 65px;
      border: 1px solid rgba(188, 53, 35, 0.3);
    }
    
    .chinese-pattern {
      position: absolute;
      width: 120px;
      height: 120px;
      background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 60 A60 60 0 0 1 60 0 A60 60 0 0 1 120 60 A60 60 0 0 1 60 120 A60 60 0 0 1 0 60 Z' stroke='%238c8984' stroke-width='0.5' fill='none'/%3E%3Cpath d='M30 60 A30 30 0 0 1 60 30 A30 30 0 0 1 90 60 A30 30 0 0 1 60 90 A30 30 0 0 1 30 60 Z' stroke='%238c8984' stroke-width='0.5' fill='none'/%3E%3C/svg%3E");
      opacity: 0.03;
      z-index: -1;
    }
    
    .pattern-top-right {
      top: 0;
      right: 0;
    }
    
    .pattern-bottom-left {
      bottom: 100px;
      left: 0;
    }
    
    .premium-link {
      color: var(--mountain-green);
      display: flex;
      align-items: center;
      position: relative;
    }
    
    .premium-link:after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 100%;
      height: 1px;
      background-color: var(--mountain-green);
      opacity: 0.3;
    }
  </style>
</head>
<body>
  <!-- 背景装饰 -->
  <div class="mountain-bg">
    <img src="images/mountain-bg.svg" alt="山水背景" style="width:100%; height:100%; object-fit:cover;">
  </div>
  
  <div class="chinese-pattern pattern-top-right"></div>
  <div class="chinese-pattern pattern-bottom-left"></div>
  
  <!-- 顶部导航栏 -->
  <div class="navbar">
    <h1 class="text-xl font-bold" style="color: var(--ink-black);">智能起名</h1>
    <a href="#" class="premium-link">
      <span class="mr-1">付费版</span>
      <i data-lucide="crown" class="w-4 h-4"></i>
    </a>
  </div>
  
  <div class="form-container">
    <!-- 基本信息表单 -->
    <form>
      <div class="form-group">
        <label for="baby-name" class="label">宝宝姓氏</label>
        <input type="text" id="baby-name" class="input-field" placeholder="请输入姓氏，如：王、李">
      </div>
      
      <div class="form-group">
        <label class="label">宝宝性别</label>
        <div class="radio-group">
          <label class="radio-item">
            <input type="radio" name="gender" value="male" class="radio-input" checked>
            <span>男宝</span>
          </label>
          <label class="radio-item">
            <input type="radio" name="gender" value="female" class="radio-input">
            <span>女宝</span>
          </label>
          <label class="radio-item">
            <input type="radio" name="gender" value="unknown" class="radio-input">
            <span>未知</span>
          </label>
        </div>
      </div>
      
      <div class="form-group">
        <label for="birth-time" class="label">出生时间</label>
        <input type="datetime-local" id="birth-time" class="input-field">
      </div>
    </form>
    
    <!-- 起名方式选择 -->
    <div class="methods">
      <h2 class="methods-title">选择起名方式</h2>
      
      <div class="method-card">
        <div class="method-icon-wrapper">
          <img src="images/icons/zodiac.svg" alt="生肖" width="24" height="24">
        </div>
        <h3 class="method-title">生肖起名</h3>
        <p class="method-desc">根据宝宝的生肖特点，挑选适合的字词组合，确保名字与生肖相生相合。</p>
      </div>
      
      <div class="method-card">
        <div class="method-icon-wrapper">
          <img src="images/icons/traditional.svg" alt="传统国学" width="24" height="24">
        </div>
        <h3 class="method-title">传统国学起名</h3>
        <p class="method-desc">运用传统国学理论，结合八字五行、三才五格等原理为宝宝起名。</p>
      </div>
      
      <div class="method-card">
        <div class="method-icon-wrapper">
          <img src="images/icons/poetry.svg" alt="文化典故" width="24" height="24">
        </div>
        <h3 class="method-title">文化典故起名</h3>
        <p class="method-desc">从古诗词、经典名著中汲取灵感，打造内涵丰富、寓意美好的名字。</p>
      </div>
      
      <div class="method-card">
        <div class="pro-tag">专业版</div>
        <div class="method-icon-wrapper">
          <img src="images/icons/premium.svg" alt="专业版" width="24" height="24">
        </div>
        <h3 class="method-title">国学典故结合法</h3>
        <p class="method-desc">融合国学理论与文化典故，全方位考量打造独特而文化底蕴深厚的名字。</p>
      </div>
    </div>
  </div>
  
  <!-- 底部标签栏 -->
  <div class="chinese-tab-bar">
    <div class="tab-item active">
      <img src="images/icons/tab-naming.svg" alt="起名" width="24" height="24" class="tab-icon">
      <span>起名</span>
    </div>
    <div class="tab-item">
      <img src="images/icons/tab-test.svg" alt="测名" width="24" height="24" class="tab-icon">
      <span>测名</span>
    </div>
    <div class="tab-item">
      <img src="images/icons/tab-my.svg" alt="我的" width="24" height="24" class="tab-icon">
      <span>我的</span>
    </div>
  </div>
  
  <script src="https://unpkg.com/lucide@latest"></script>
  <script>
    lucide.createIcons();
  </script>
</body>
</html> 